<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>vue练习</title>
	</head>
	<body>
		<!-- 单项绑定 start -->
		<div id="example-1">
		  Hello {{ name }}!
		</div>
		<!-- 单项绑定 start -->
		
		<!-- 双向绑定 start -->
		<div id="towWay">
			<p>{{message}}</p>
			<input v-model="message" />
		</div>
		<!-- 双向绑定 end -->
		
		<!-- list start -->
		<div id="list">
			<ul>
				<li v-for="todo in todos">
					{{ todo.text }}
				</li>
			</ul>
		</div>
		<!-- list end -->
		
		<!-- reverse start -->
		<!--<div id="reverse">
			<p>{{rmessage}}</p>
			<button v-on-click="reverseRmessage">Reverse Message</button>
		</div>-->
		
		<div id="test">
		  <p>{{ message }}</p>
		  <button v-on:click="reverseMessage">Reverse Message</button>
		</div>
		<!-- reverse end -->
		
		<script src="js/vue.js"></script>
		<script>
		 function toNumber(value) {
    if (typeof value !== 'string') {
      return value;
    } else {
      var parsed = Number(value);
      return isNaN(parsed) ? value : parsed;
    }
  }
		
			// 这是我们的 Model
			var exampleData = {
			  name: '小米'
			}
			
			// 创建一个 Vue 实例或 "ViewModel"
			// 它连接 View 与 Model
			var exampleVM = new Vue({
			  el: '#example-1',
			  data: exampleData,
			  ready: function(){
			  	alert(typeof   toNumber("1.23545"));
			  }
			})
			
			// 双向绑定
			var towWay = new Vue({
				el: "#towWay",
				data: {
					message: 'hello'
				}
			});
			
			// list
			var list = new Vue({
				el:"#list",
				data: {
					todos: [
						{text:'learn js'},
						{text:'learn css'},
						{text:'learn html'}
					]
				}
			});
			
			// reverse
			 var reverse = new Vue({
			 	el: "#test",
			 	data: {
			 		message:"hello vue"
			 	},
			 	methods:{
				    reverseMessage: function () {
				      this.message = this.message.split('').reverse().join('')
				    }
				  }
			 });
			
		</script>
	</body>
</html>
